<!--简答题预览模块-->
<template>
  <div class="item-content">
    <div class="content-options">
      <div class="options-title" :style="{ fontSize: adaptiveFontSize(topicFontSize) }">
        <span class="title-required" v-if="required">*</span>{{ id }}、{{ desc }}
      </div>
      <el-input
        type="textarea"
        :rows="5"
        maxlength="1000"
        placeholder="请输入内容"
        v-model="content"
        show-word-limit
        resize="none"
        :disabled="deliveryStatus === EDIT_STATUS || disabled"
        :style="{ fontSize: adaptiveFontSize(contentFontSize) }"
      ></el-input>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { DEVICE_TYPE, PROCESS_TYPE, SCALE_CONFIGURATION } from "@/utils/mockConfiguration/mockConfig";
const { EDIT_STATUS } = PROCESS_TYPE;
const props = defineProps({
  terminalType: {
    type: String,
    required: true,
    default: DEVICE_TYPE.DESKTOP, //DESKTOP:pc端,MOBILE:移动端
  },
  deliveryStatus: {
    type: String,
    required: true,
    default: PROCESS_TYPE.EDIT_STATUS, //EDIT_STATUS:编辑状态,PREVIEW_STATUS:预览状态,DELIVERY_STATUS:下发状态,SUBMISSION_STATUS:提交状态,
  }, //流程状态，默认编辑状态
});

//模块样式
const cssStyle = defineModel("cssStyle", {
  type: Object,
  required: false,
});
//模块数据
const businessData = defineModel("businessData", {
  type: Object,
  required: false,
});

const { topicFontSize, contentFontSize } = toRefs(cssStyle.value);
const { disabled, content, required, desc, id } = toRefs(businessData.value);

/**
 * 适配字体
 */
const adaptiveFontSize = computed(() => value => `${value * SCALE_CONFIGURATION[props.terminalType]}rem`);
</script>

<style lang="less" scoped>
//选项题目模块
:deep(.content-options) {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  //选择题标题
  .options-title {
    font-size: 28px;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
    //星号
    .title-required {
      color: @buttonColor;
    }
  }
}
</style>
